{extend name="base/common"}

{block name="style"}
<!-- Toastr style -->
<link href="/admin/css/plugins/toastr/toastr.min.css" rel="stylesheet">
<!-- Gritter -->
<link href="/admin/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
<!-- Ladda style -->
<link href="/admin/css/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">
<style>
    .ibox-content {
        /*min-height: 76vh;*/
        /*!*line-height: calc(74vh - 35px);*!*/
        /*background: url("/admin/images/bg.jpg") center 0 no-repeat;*/
        /*background-size: 100%;*/
        position: relative;
        padding: 0 !important;
        overflow: hidden;
    }
    .ibox-content>img {
        display: block;
        width: 100%;
        /*height: 100%;*/
        opacity: .9;
    }
    .p-lg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        padding: 0 !important;
    }
    .float-e-margins .btn {
        border-radius: 100%;
        padding: 0!important;
        width: 140px;
        height: 140px;
        text-align: center;
        line-height: 140px;
        margin-bottom: 0!important;
        font-size: 28px;
        margin-top: -130px;
    }
</style>
{/block}

{block name="page-header"}
{/block}

{block name="main"}

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>一键同步微信通讯录</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <img src="/admin/images/bg.jpg" alt="">
                    <div class="text-center p-lg">

                        <button class="ladda-button btn-dep btn btn-warning" data-style="slide-left">
                            <span class="ladda-label">一键同步</span><span class="ladda-spinner"></span>
                        </button>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="script"}
<!-- Flot -->
<script src="/admin/js/plugins/flot/jquery.flot.js"></script>
<script src="/admin/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="/admin/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="/admin/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="/admin/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="/admin/js/plugins/flot/jquery.flot.symbol.js"></script>
<script src="/admin/js/plugins/flot/jquery.flot.time.js"></script>
<script src="/admin/js/plugins/ladda/spin.min.js"></script>
<script src="/admin/js/plugins/ladda/ladda.min.js"></script>
<script src="/admin/js/plugins/ladda/ladda.jquery.min.js"></script>
<script type="text/javascript">
    /* 插件块关闭操作 */
    $(".title-opt .wm-slide").each(function(){
        $(this).click(function(){
            $(this).closest(".columns-mod").find(".bd").toggle();
            $(this).find("i").toggleClass("mod-up");
        });
    })

    var l = $( '.btn-dep' ).ladda();

    l.click(function(){
        l.ladda( 'start' );
        $.ajax({
            type: "get",
            url: "{:Url('Wechat/syncAll')}",
            success: function (response) {
                swal('同步成功');
                $('.confirm').one('click',function(){
                    window.location.reload();
                });
                l.ladda('stop');
            },
            error: function (err) {
                l.ladda('stop');
            }
        });
    });
</script>

{/block}